<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>查看任务</title>

    <link rel="stylesheet" href="../lib/css/style.css">
    <link rel="stylesheet" href="./ueditor.css">

    <script src="../lib/jquery/jquery.js"></script>
    <script src="../lib/lib.js"></script>
<!--    <script src="/api/bpm/workflow/jslib"></script>-->
    <!--    <script src="../../../static/htmljs/utils.js"></script>-->
<!--    <link rel="stylesheet" href="../lib/font/css/font-awesome.min.css">-->

    <style>
        .needs-discussion:not(.djs-connection) .djs-visual > :nth-child(1) {
            stroke: rgba(66, 180, 21, 0.7) !important; /* color elements as red */
        }

        .diagram-note {
            background-color: rgba(66, 180, 21, 0.7);
            color: White;
            border-radius: 5px;
            font-family: Arial;
            font-size: 12px;
            padding: 5px;
            min-height: 16px;
            width: 50px;
            text-align: center;
        }

        #canvas {
            width: 100%;
            height: 800px;
        }

        #phead {
            list-style: none;
            overflow: hidden;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        #phead li {
            padding-left: 15px;
            padding-right: 15px;
            float: left;
            cursor: pointer;
            font-size: 13px;
            /*margin-bottom: -1px;*/
            padding-bottom: 10px;
        }

        #phead li.active {
            border-bottom: 2px solid deepskyblue;
            color: deepskyblue;;
        }

        .__tab {
            display: none;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Wenquanyi Micro Hei", "Microsoft Yahei", Arial, sans-serif;
            font-size: 13px;
            /*overflow: hidden;*/
        }

        /*#iframe-container{*/
        /*    position: relative;*/
        /*    overflow: hidden;*/
        /*    padding-bottom: 160%;*/
        /*}*/

        /*#iframe{*/
        /*    position: absolute;*/
        /*    top: 0;*/
        /*    left: 0;*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    border: 0;*/
        /*}*/
        .active {
            display: block !important;
        }

        [v-cloak] {
            display: none !important;
        }

        .fa-bell, .fa-envelope {
            cursor: pointer;
        }

        .fa {
            font-size: 18px;
        }

        .button-content:before {
            content: '';
            width: 20px;
            height: 0%;
            border: 15px solid;
            border-color: transparent #B2DE34 transparent transparent;
            position: absolute;
            right: 100px;
            top: 0px;
        }

        .button-content {
            width: 100px;
            height: 30px;
            background-color: #B2DE34;
            font-size: small;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            /*right: 100px;*/
        }

        .button-content:after {
            content: '';
            width: 10px;
            border: 15px solid;
            border-color: transparent transparent transparent #58661C;
            border-top: 0;
            right: -15px;
            position: absolute;
            top: 30px;
        }

        .button-wrap {
            position: relative;;
            width: 100%;
            height: 50px;
            cursor: pointer;

        }

        .button-content.act {
            /*font-family: 'Audiowide';*/
            /*text-align: center;*/
            color: white;
            /*font-size: 7em;*/
            transition: all 1.5s ease;
            animation: Glow 1.5s ease infinite alternate;
        }

        .textdot {
            width: 100%;
            height: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            /*box-sizing: border-box;*/
            /*padding-left: 10px;*/
        }

        .button-content-right {
            width: 100px;
            height: 30px;
            background-color: #76caeb;
            font-size: small;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0px;

        }

        .button-content-right:before {
            content: '';
            width: 10px;
            height: 0%;
            border: 15px solid;
            border-color: transparent #568ca0 transparent transparent;
            border-top: 0;
            left: -15px;
            position: absolute;
            top: 30px;
        }

        .button-content-right:after {
            content: '';
            width: 20px;
            height: 0%;
            border: 15px solid;
            border-color: transparent transparent transparent #76caeb;
            position: absolute;
            right: -30px;
            top: 0px;
        }


        .button-content-right-end {
            width: 100px;
            height: 30px;
            background-color: #C2C2C2;
            font-size: small;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0px;

        }

        .button-content-right-end:before {
            content: '';
            width: 10px;
            height: 0%;
            border: 15px solid;
            border-color: transparent #969696 transparent transparent;
            border-top: 0;
            left: -15px;
            position: absolute;
            top: 30px;
        }

        .button-content-right-end:after {
            content: '';
            width: 20px;
            height: 0%;
            border: 15px solid;
            border-color: transparent transparent transparent #C2C2C2;
            position: absolute;
            right: -30px;
            top: 0px;
        }

        /*.button-content.act:hover {*/
        /*    !*color: #fff;*!*/
        /*}*/
        @keyframes Glow {
            from {
                text-shadow: 0 0 10px #fff,
                0 0 20px #fff,
                0 0 30px #fff,
                0 0 40px #fff,
                0 0 70px #fff,
                0 0 80px #fff,
                0 0 100px #fff,
                0 0 150px #fff;
            }
            to {
                text-shadow: 0 0 5px #fff,
                0 0 10px #fff,
                0 0 15px #fff,
                0 0 20px #fff,
                0 0 35px #fff,
                0 0 40px #fff,
                0 0 50px #fff,
                0 0 75px #fff;
            }
        }
        #toolbar{
            position: fixed;
            left: 10px;
            top: 150px;
            z-index: 1002;
        }
        .toolbar-item{
            width: 50px;
            height: 50px;
            line-height: 50px;
            /*border: 1px solid #ddd;*/
            background: #76caeb;
            color: white;
            text-align: center;
            font-size: 12px;
            margin-bottom: 1px;
        }
        .toolbar-item .fa{
            font-size: 18px;
        }
        .comment-textarea{
            position: absolute;;
            z-index: 1001;
        }
        .comment-modal{
            position:absolute; top: 0;left: 0;width: 100%;height: 100%; background: rgba(0,0,0,.5); z-index: 1000;
        }
        .comment-textarea .btn {
            padding: 2px 5px;
        }
        .comment-item{
            position: absolute;
            left: 0;
            top:0;
            color: red;
            width: 150px;
        }

        /*.sel-node{*/
        /*    background: #00b7ee;*/
        /*    color: white;*/
        /*    padding: 4px 10px;*/
        /*    cursor: pointer;*/
        /*}*/
    </style>

    <!--    <link rel="stylesheet" href="jquery.webui-popover.min.css">-->
    <!--    <script src="jquery.webui-popover.min.js"></script>-->
    <!--    <script src="right_menu.js"></script>-->
    <!--    <script src="../../../static/vendor/artTemplate/template-web.js"></script>-->
    <script>
        // window.type = getParam("type");
        // window.id = getParam("id");

        // window.Data = null;
        // window.FormBody = null;
    </script>
    <script src="../lib/bpm/bpmn-viewer.js"></script>
    <script src="../lib/layer/layer.js"></script>
    <script src="../lib/laydate/laydate.js"></script>
    <link rel="stylesheet" href="../lib/web-uploader/webuploader.css">
    <script src="../lib/web-uploader/webuploader.min.js"></script>
    <script src="../lib/vue/vue.js"></script>
    <script src="../lib/vue/vue-util.js"></script>
    <script src="../lib/echart/echarts.min.js"></script>
    <script src="../lib/echart/functions.js"></script>
    <link rel="stylesheet" href="../lib/font/css/font-awesome.min.css">
    <script src="../lib/menu/jquery.contextMenu.min.js"></script>
    <script src="../lib/menu/jquery.ui.position.min.js"></script>
    <link rel="stylesheet" href="../lib/menu/jquery.contextMenu.min.css">
    <script src="../lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../form/js/ueditor/themes/iframe.css">
</head>
<body>
<div id="app" style="padding: 10px;" v-cloak>
    <div id="toolbar" v-if="tabIndex == 0">
        <div class="toolbar-item" @click="switchComment" v-if="data && data.comment">
            <i class="fa fa-pencil"></i>
        </div>
        <div class="toolbar-item " @click="switchAllComments">
            <i class="fa fa-eye" v-if="showAllComments"></i>
            <i class="fa fa-eye-slash" v-else></i>
        </div>
    </div>
    <ul id="phead">
        <li :class="{active: tabIndex == 0}" @click="tabIndex=0">表单</li>
        <li :class="{active: tabIndex == 1}" @click="tabIndex=1">流程图</li>
        <li :class="{active: tabIndex == 2}" @click="tabIndex=2" v-if="type != 'pub'">日志</li>
        <li :class="{active: tabIndex == 3}" @click="tabIndex=3" v-if="type != 'pub'">时间统计</li>
        <li :class="{active: tabIndex == 4}" @click="tabIndex=4" v-if="type != 'pub'">批注</li>
    </ul>
    <div id="pbody">
        <!--startprint-->
        <div :class="{active: tabIndex == 0}" id="form" class="__tab"
             style="width: 980px; margin: 0 auto; position: relative; ">
            <div style="display: flex; flex-direction: row">
                <div style="width: 100px;" v-if="data && data.dealCurrents">
                    <div @click="goNode(v)" class="button-wrap" style="position: relative"
                         v-for="(v,i) in data.dealCurrents" v-if="v.type == 'node'">
                        <div class="button-content" :class="{act: data.logId == v.logId}">
                            <div class="textdot" :title="v.nodeName">
                                {{v.nodeName}}
                            </div>
                        </div>
                    </div>
                </div>

                <div style="flex: 1; position:relative;">
                    <div class="comment-modal" style="" v-show="commentShowModal" @click="createComment">
                    </div>
                    <template v-if="data && data.comments && showAllComments">
                        <div class="comment-item" v-for="v in data.comments"  :style="{left: v.x + 'px', top: v.y + 'px'}">
                            【{{v.uname}}】{{v.content}}
                        </div>
                    </template>
                    <div v-if="commentTextarea" class="comment-textarea" :style="{left: commentTextarea.x + 'px', top: commentTextarea.y + 'px' }">
                        <textarea autofocus v-model="commentTextarea.content"></textarea>
                        <p style="text-align: center">
                            <button type="button" class="btn btn-sm btn-primary" @click="confirmComment">确定</button>
                            <button type="button" class="btn btn-sm btn-danger" @click="cancelComment">取消</button>
                        </p>
                    </div>
                    <div style="width: 740px; margin: 0 auto;">
                        <ins-form :data="data" :type="type" ref="form" v-if="data"></ins-form>
                        <ins-sign :data="data" ref="sign" v-if="data"></ins-sign>
<!--                        <ins-comment :data="data" ref="comment" v-if="data"></ins-comment>-->

                        <div id="file-app">
                            <div style="padding-bottom: 20px;" v-if="files.length">
                                <div v-for="(v,i) in files">
                                    {{v.name}}
                                    &nbsp;
                                    &nbsp;
                                    {{v.state}}
                                    {{v.percent}}
                                    <a href="javascript:;" @click="remove(i)"
                                       v-if="!v.creator || v.creator == uid">删除</a>
                                    <a
                                            :href="getPreviewUrl(v)"
                                            v-if="(!v.uploading || v.state == '成功') && canPreview(v.resp ? v.resp.name : v.name)">预览</a>

                                    <a :href="'/api/bpm/workflow/download?name=' + (v.resp ? v.resp.name : v.name) + '&path=' + (v.resp ? v.resp.id : v.id)"
                                       v-if="!v.uploading || v.state == '成功'">下载</a>
                                </div>
                            </div>
                        </div>

                        <!--<div class="print-s" style="display: none;text-align: center;">-->
                        <!--<a class="btn btn-danger btn-sm" href="javascript:;" id="wPrint" @click="wPrint()" v-if="!data.deal">打印</a>-->
                        <!--</div>-->

                        <div class="action" style="text-align: center;">
                            <a class="btn btn-danger btn-sm" href="javascript:;" id="wPrint" @click="wPrint()"
                               v-if="data && !data.deal && !data.sign && inited">打印</a>
                            <!-- Single button -->
                            <div class="btn-group dropup"
                                 v-if="data && data.deal && data.childprocess && data.childprocess.length && data.manual == '1'">
                                <button type="button" class="btn btn-primary btn-sm dropdown-toggle"
                                        data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                    创建子流程 <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu">
                                    <li href="#" v-for="v in data.childprocess"><a href="#"
                                                                                   @click="createChildProcess(v.id)">{{v.name}}</a>
                                    </li>
                                </ul>
                            </div>
                            <label v-show="data && data.upload" class="btn btn-warning btn-sm"
                                   style="position:relative;overflow: hidden" id="upload" @click="upload0">
                                <div id="picker"
                                     style="width: 1px;height: 1px;position:absolute;left: -100px;top: -100px;">
                                </div>
                                上传
                            </label>
                            <a class="btn btn-danger btn-sm" href="javascript:;" id="goRetreat"
                               v-if="data && data.retreat"
                               @click="goRetreat()">回撤</a>
                            <a class="btn btn-danger btn-sm" href="javascript:;" id="goBack" v-if="data && data.back"
                               @click="goBack()">回退</a>
                            <a class="btn btn-primary btn-sm" href="javascript:;" id="save"
                               v-if="data && (data.deal || data.sign)" @click="submit(false)">保存</a>
                            <a class="btn btn-primary btn-sm" href="javascript:;" id="submit"
                               v-if="data && (data.deal || data.sign) && type != 'edit'" @click="submit(true)">提交</a>
                        </div>

                    </div>
                </div>
                <div style="width: 100px;" v-if="data && data.dealCurrents">
                    <div @click="goBackParent()" class="button-wrap" style="position: relative"
                         v-if="data && data.parInsId">
                        <div class="button-content-right">
                            <div class="textdot">
                                返回主流程
                            </div>
                        </div>
                    </div>
                    <div @click="goNode(v)" class="button-wrap" style="position: relative"
                         v-for="(v,i) in data.dealCurrents" v-if="v.type == 'childps'">
                        <div class="button-content-right"  :class="[v.state ? 'button-content-right-end' : 'button-content-right',{act: data.logId == v.logId}]">
                            <div class="textdot" :title="v.name">
                                {{v.name}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--endprint-->

        <div :class="{active: tabIndex == 1}" id="canvas" class="__tab">
            <ins-canvas :data="data" v-if="data"></ins-canvas>
        </div>
        <div :class="{active: tabIndex == 2}" id="dataLog" class="__tab" v-if="type != 'pub'">
            <ins-log :data="data" :ins-id="id" v-if="data"></ins-log>
        </div>
        <div :class="{active: tabIndex == 3}" class="__tab" v-if="type != 'pub'">
            <ins-time :data="data" v-if="data"></ins-time>
        </div>

        <div :class="{active: tabIndex == 4}" class="__tab" v-if="type != 'pub'">
            <ins-comment :data="data" :ins-id="id" v-if="data"></ins-comment>
        </div>
    </div>


    <div id="back-model" style="display: none" v-if="data">
        <div style="width: 100%;height: 100%; box-sizing: border-box; padding: 10px;">
            <h5>输入回退原因</h5>
            <textarea style="width: 100%;" class="form-control " name="" id="reason" rows="3"
                      v-model="back.reason"></textarea>
            <h5>回退节点</h5>
            <label v-for="(v,i) in backarr">
                <input type="radio" name="back-node" v-model="back.logId" :value="v.id"> {{v.name}}
            </label>
            <div>
                <label>
                    <input type="checkbox" value="1" v-model="back.sendMobile">
                    发送短信
                </label>
            </div>
            <div style="text-align: center">
                <button @click="goBackAction()" type="button" class="btn btn-primary btn-danger">回退</button>
            </div>
        </div>
    </div>
    <div id="comment-model" style="display: none" v-if="data">
        <div style="width: 100%;height: 100%; box-sizing: border-box; padding: 10px;">
            <textarea style="width: 100%;" id="content" class="form-control " name="" rows="4"
                      v-model="commentContent"></textarea>
            <div style="text-align: center;margin-top: 10px">
                <button @click="addComment()" type="button" class="btn btn-primary btn-sm">确定</button>
            </div>
        </div>
    </div>

    <div id="concurrent-model" style="display: none">
        <div style="width: 100%;height: 100%; box-sizing: border-box; padding: 10px;">
            <h5>处理节点</h5>
            <label v-for="(v,i) in dealCurrent">
                <input type="radio" name="deal-node" v-model="dealNode" :value="v.id"> {{v.name}}
            </label>

            <div style="text-align: center">
                <button @click="concurrentAction()" type="button" class="btn btn-primary btn-danger">确定</button>
            </div>
        </div>
    </div>

</div>

<DIV class=contextMenu id=myMenu1 style="display: none;">
    <UL>
        <LI id=open style="font-size: 12px;line-height: 20px;vertical-align: middle;"><IMG width="20px" height="20px"
                                                                                           style="margin-top: -3px;margin-right: 5px;"
                                                                                           src="his.png">提交历史
        </LI>
    </UL>
</DIV>


</body>
</html>
<script type="text/html" id="node_temp">
    <select class="form-control input-sm" id="selectCat">
        {{each nodeList value index}}
        <option value="{{value.id}}">{{value.name}}</option>
        {{/each}}
    </select>
</script>
<script>

    loadComponent("ins-form", "./ins.form.html");
    loadComponent("ins-sign", "./ins.sign.html");
    loadComponent("ins-comment", "./ins.comment.html");
    loadComponent("ins-canvas", "./ins.canvas.html");
    loadComponent("ins-log", "./ins.log.html");
    loadComponent("ins-time", "./ins.time.html");
    loadComponent("ins-annex", "./ins.annex.html");

    window._node = "";
    window.app = new Vue({
        el: "#app",
        data: {
            data: null,
            id: "",
            type: "",
            files: [],
            back: {
                logId: "",
                sendMobile: "",
                reason: ""
            },
            backarr: {},
            dealCurrent: {},
            dealNode: "",
            uid: JSON.parse(localStorage.$user).id,
            tabIndex: 0,
            inited: false,
            signOneOver: false,
            sendShort: false,
            commentContent: "",   //批注内容
            isConcurrent: false, // 是否并发提交
            logId: getParam("logId"),
            commentShowModal: false,
            commentTextarea: null,
            showAllComments: true
        },
        methods: {
            cancelComment: function(){
                this.commentShowModal = false;
                this.commentTextarea = null;
            },
            createComment: function(e){
                Vue.set(this, "commentTextarea", {
                    x: e.offsetX,
                    y: e.offsetY,
                    content: ""
                })
            },
            switchComment: function(){
                this.commentShowModal = !this.commentShowModal;
                if(this.commentShowModal){
                    this.commentTextarea = null;
                } else {
                    this.cancelComment()
                }
            },
            confirmComment: function(){
                var t = this;
                var idex = layer.load(2);
                $.post("/api/bpm/workflow/saveComment?id=" + this.id, JSON.stringify(this.commentTextarea), function (msg) {
                    layer.close(idex);
                    t.cancelComment()
                    if(!msg.success){
                        return layer.msg(msg.errMessage);
                    }
                    t.data.comments.push(msg.data)
                }, "json")
            },
            switchAllComments: function(){
                this.showAllComments = !this.showAllComments;
            },
            remove: function (i) {
                this.files.splice(i);
            },
            /**
             * 初始化页面
             */
            load: function () {
                this.id = getParam("id");
                this.type = getParam("type");

                // if (this.type == 'pub') {
                //     document.title = "发布任务";
                // } else {
                //     document.title = "查看任务";
                // }

                var ajax = null;
                // if (this.type == 'pub') {
                //     return
                //     ajax = $.post("/api/bpm/workflow/preparePub",JSON.stringify({id: this.id, args: getAllUrlParams()}));
                // } else {
                ajax = $.post("/api/bpm/workflow/getInsInfo", JSON.stringify({
                    id: this.id,
                    args: getAllUrlParams(),
                    nodeId: this.dealNode
                }));
                // loadLogs(window.id);
                // }

                var t = this;
                $.when(ajax).then(function (msg) {
                    if (!msg.success) {
                        return layer.msg(msg.errMessage);
                    }
                    t.data = null;
                    t.$nextTick(function () {
                        t.inited = true;
                        Vue.set(t, "data", msg.data)
                        // t.data = msg.data;
                        if (t.type == "edit") {
                            t.data.deal = true;
                        }
                    });
                    t.files = msg.data.files || [];

                });
            },

            /**
             * 船新版本的文件上传，不和以前的冲突, 故直接复制
             */
            initWidgetUploader: function () {
                $("<div style='width: 1px;height: 1px; visibility: hidden; overflow: hidden;' id='uploader-picker'></div>").appendTo("body");
                var t = this;
                var setFile = function (file) {
                    if (file.f) {
                        var i = file.arr.indexOf(file.f);
                        if (i > -1) {
                            Vue.set(file.arr, i, file.f);
                        }
                    }
                }
                //初始化webuploader
                window.WidgetUploader = WebUploader.create({
                    // swf文件路径
                    swf: '../lib/web-uploader/Uploader.swf',
                    // 文件接收服务端。
                    server: Env.ApiUrl + '/workflow/upload',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#uploader-picker',
                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: false,
                    auto: true,
                    duplicate: true,
                    fileVal: "file"
                })
                .on('uploadBeforeSend', function (block, data, headers) {
                    headers["bpm-token"] = localStorage.getItem("bpm-token");
                })
                // .on("uploadStart", function (file) {
                //     file.percent = "0%";
                //     file.state = '上传中';
                //     file.uploading = true;
                //     t.files.push(file);
                //     // console.log(file)
                // })
                    .on("uploadProgress", function (file, percentage) {
                        if (file.f) {
                            file.f.hint = (percentage * 100).toFixed(0) + "%";
                            setFile(file);
                        }
                    })
                    .on("uploadSuccess", function (file, response) {
                        if (file.f) {
                            if (response.success) {
                                for (var i in response.data) {
                                    file.f[i] = response.data[i];
                                }
                                file.f.hint = "";
                            } else {
                                file.f.hint = "失败"
                            }
                            setFile(file);
                        }
                    }).on("uploadError", function (file) {
                        if (file.f) {
                            file.f.hint = "失败";
                            setFile(file);
                        }
                    }).on("uploadComplete", function (file) {
                    });
            },
            upload0: function(){
                $("#uploader-picker-0 input[type=file]").click()
            },
            upload: function (arr) {
                WidgetUploader
                    .off("uploadStart")
                    .on("uploadStart", function (file) {
                        console.log(file)
                        var f = {
                            name: file.name,
                            hint: ""
                        };
                        file.f = f;
                        file.arr = arr;
                        arr.push(f);
                    });
                $("#uploader-picker input").click();
            },
            /**
             * 初始化文件上传
             */
            initUploader: function () {
                $("<div style='width: 1px;height: 1px; visibility: hidden; overflow: hidden;' id='uploader-picker-0'></div>").appendTo("body");
                var t = this;
                //初始化webuploader
                var uploader = WebUploader.create({
                    // swf文件路径
                    swf: '../lib/web-uploader/Uploader.swf',
                    // 文件接收服务端。
                    server: Env.ApiUrl + '/workflow/upload',
                    // 选择文件的按钮。可选。
                    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                    pick: '#uploader-picker-0',
                    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                    resize: false,
                    auto: true,
                    duplicate: true,
                    fileVal: "file"
                })
                    .on('uploadBeforeSend', function (block, data, headers) {
                        headers["bpm-token"] = localStorage.getItem("bpm-token");
                    })
                    .on("uploadStart", function (file) {
                    file.percent = "0%";
                    file.state = '上传中';
                    file.uploading = true;
                    t.files.push(file);
                    // console.log(file)
                }).on("uploadProgress", function (file, percentage) {
                    file.percent = (percentage * 100).toFixed(0) + "%";
                }).on("uploadSuccess", function (file, response) {
                    if (response.success) {
                        file.state = "成功";
                        file.uploading = false;
                        file.resp = response.data;
                    } else {
                        file.state = "失败";
                    }
                }).on("uploadError", function (file) {
                    file.state = "失败";
                }).on("uploadComplete", function (file) {
                    file.percent = "";
                });
            },

            /**
             * 获取数据
             * @returns {{data: *, files: *}}
             */
            getData: function () {
                var data = this.$refs.form.getData();
                //提交所有这个节点上的文件
                var _files = this.files
                    .filter(function (e) {
                        return !e.uploading;
                    })
                    // .filter(function (e) {
                    //     return e.resp || e.action == "delete";
                    // })
                    .filter(function (e) {
                        return !e.uploading;
                    })
                    .map(function (e) {
                        return e.resp || e;
                    });
                return ({
                    data: data,
                    files: _files,
                    sign: this.$refs.sign.sign
                })
            },

            /**
             * 会签提交
             */
            saveSign: function (gonext) {
                var idex = layer.load(2, {time: 3000});
                var t = this;
                var current = t.data.current;
                $.ajax({
                    url: "/api/bpm/workflow/countersign",
                    data: JSON.stringify({
                        _id: this.id,
                        nodeId: current && current[0] ? current[0] : "",
                        sign: this.getData().sign,
                        over: gonext,
                        logId:t.data.logId
                    }),
                    type: "post",
                    dataType: "json",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    complete: function () {
                        layer.close(idex);
                    },
                    success: function (msg) {
                        if (!msg.success) {
                            layer.msg(msg.errMessage);
                            return;
                        }
                        if (!gonext) {
                            layer.msg("保存成功")
                        } else if (msg.data == 'continue') {
                            var iWidth = "650";                         //弹出窗口的宽度;
                            var iHeight = "590";
                            var iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
                            var iLeft = (window.screen.width - 10 - iWidth) / 2;
                            window.open("./ins.next2.html?id=" + t.id + "&logId=" + t.data.logId, "nextpersons", "top=" + iTop + ", left=" + iLeft + ", width=670, height=570")
                        } else {
                            layer.msg("提交成功，请等待其他人会签完毕");
                            t.load();
                        }
                    }
                });
            },

            // signOver: function () {
            //     var data1 = {};
            //     data1.id = this.id;
            //
            //     // $.post("/api/bpm/workflow/reOnesignOver", JSON.stringify(data1), function (msg) {
            //     //     if (msg.success) {
            //     //         Vue.set(app,"signOneOver",msg.data)
            //     //         // this.signOneOver = msg.data;
            //     //     }
            //     // })
            //
            //     $.ajax({
            //         url: "/api/bpm/workflow/reOnesignOver",
            //         type: "post",
            //         headers: {
            //             "Content-Type": "application/json"
            //         },
            //         dataType: "json",
            //         data: JSON.stringify(data1),
            //         success: function (msg) {
            //             if (msg.success) {
            //                 Vue.set(app,"signOneOver",msg.data)
            //                 // this.signOneOver = msg.data;
            //             }
            //         }
            //     })
            // },

            /**
             *  任务保存 提交
             */
            submit: function (gonext) {
                var url = "";
                // if (this.type == 'pub') {
                //     url = "/api/bpm/workflow/createIns";
                // } else {
                //     if (gonext) {
                //         url = "/api/bpm/workflow/subIns";
                //     } else {
                        url = "/api/bpm/workflow/saveIns";
                    // }
                // }

                //会签的特殊情况
                //如果我不是主办人，却可以会签
                if (!this.data.deal && this.data.sign) {
                    this.saveSign(gonext);
                    return;
                }

                var data = this.getData();
                var iWidth = "650";                         //弹出窗口的宽度;
                var iHeight = "590";                        //弹出窗口的高度;
                //window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
                var iTop = (window.screen.height - 30 - iHeight) / 2;       //获得窗口的垂直位置;
                var iLeft = (window.screen.width - 10 - iWidth) / 2;        //获得窗口的水平位置;
                // if (this.type != 'pub' && gonext) {
                //     window.open("./ins.next.html?id=" + this.id + "&logId=" + this.data.logId, "nextpersons", "top=" + iTop + ", left=" + iLeft + ", width=670, height=570")
                //     return;
                // }

                data.id = this.id;
                data.mode = this.type;
                data.logId = this.data.logId;
                data.validate = gonext;
                var t = this;

                var idex = layer.load(2, {time: 3000})
                $.ajax({
                    url: url, //"/api/bpm/workflow/createIns",
                    type: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    dataType: "json",
                    data: JSON.stringify(data),
                    complete: function () {
                        layer.close(idex);
                    },
                    success: function (msg) {
                        if (!msg.success) {
                            layer.msg(msg.errMessage)
                            return
                        }

                        //app 没有opener
                        if (window.opener && window.opener.initTable) {
                            window.opener.initTable.apply(null, opener.last)
                        }

                        // if (t.type == 'pub') {
                        //     if (gonext) {
                        //         window.open("./ins.next.html?id=" + msg.data, "nextpersons", "top=" + iTop + ", left=" + iLeft + ", width=670, height=570")
                        //     }
                        //     layer.load(2, {time: 2000})
                        //     setTimeout(function () {
                        //         location.href = "./ins.pub.html?type=deal&id=" + msg.data
                        //     }, 500);
                        //
                        // } else {

                            if (gonext) {
                                // if (msg.data.res == true) {
                                window.open("./ins.next2.html?id=" + t.id + "&logId=" + t.data.logId, "nextpersons", "top=" + iTop + ", left=" + iLeft + ", width=670, height=570")
                                // } else {
                                //     layer.msg("保存成功")
                                //     t.load()
                                // }
                            } else {
                                // t.load()
                                layer.msg("保存成功！")
                            }
                        }

                    // }
                })
            },

            goBackAction: function () {
                var t = this;
                var nodeId = t.data.current && t.data.current[0] ? t.data.current[0] : ""
                $.ajax({
                    url: "/api/bpm/workflow/goBack",
                    dataType: "json",
                    data: JSON.stringify({id: t.id, back: this.back, nodeId: nodeId, logId: t.data.logId}),
                    type: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    success: function (msg) {
                        if (!msg.success) {
                            return layer.msg(msg.errMessage)
                        }
                        layer.closeAll();
                        layer.msg("回退成功")
                        t.load();
                    }
                });
            },
            /**
             * 任务回退
             */
            goBack: function () {
                var t = this;
                // var sendShort= false;

                //节点自动标记为上一个
                this.back = {
                    logId: "",
                    sendMobile: "",
                    reason: ""
                };
                this.backarr = {};
                (this.data.logs || []).forEach(function (v) {
                    if (v.type == 'save' && v.nodeId != t.data.current[0]) {
                        t.backarr[v.nodeId] = {
                            id: v.id,
                            name: v.nodeName
                        };
                    }
                });
                console.warn(this.backarr)

                //自动标记为上一个节点
                this.$nextTick(function () {
                    var val = $("[name=back-node]:last").val();
                    t.back.logId = val;

                    layer.open({
                        type: 1,
                        //skin: 'layui-layer-rim', //加上边框
                        area: ['400px', '400px'], //宽高
                        content: $("#back-model"),
                        title: "回退"
                    });
                })


                return
            },
            /**
             * 回撤
             */
            goRetreat: function () {
                var t = this;
                var log;
                if (t.data.logs && t.data.logs[t.data.logs.length - 1]) {
                    log = t.data.logs[t.data.logs.length - 1].id;
                }
                $.ajax({
                    url: "/api/bpm/workflow/canToRetreat",
                    dataType: "json",
                    data: JSON.stringify({id: t.id, logId: log}),
                    type: "post",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    success: function (msg) {
                        if (!msg.success) {
                            return layer.msg(msg.errMessage)
                        }
                        layer.closeAll();
                        t.load();
                        layer.msg("回撤成功")
                    }
                });
            },
            /**
             * 添加批注
             */
            addComment: function () {
                var t = this;
                $.ajax({
                    url: "/api/bpm/workflow/addComment",
                    dataType: "json",
                    data: JSON.stringify({id: t.id, content: t.commentContent}),
                    type: "post",
                    headers: {
                        "Content-type": "application/json",
                    },
                    success: function (msg) {
                        if (!msg.success) {
                            return layer.msg(msg.errMessage)
                        }
                        layer.closeAll();
                        layer.msg("填写成功")
                        t.load();
                    }
                })
            },

            wPrint: function () {
                bdhtml = $(".form-content").append($(".sign-content")).html()


                // bdhtml = window.document.body.innerHTML;//获取当前页的html代码
                // sprnstr = "<!--startprint-->";//设置打印开始区域
                // eprnstr = "<!--endprint-->";//设置打印结束区域
                // prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 17); //从开始代码向后取html
                // prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));//从结束代码向前取html
                window.document.body.innerHTML = bdhtml;
                // loadForm();
                window.print();
                location.reload()
            },
            getExt: function (name) {
                var i = name.lastIndexOf(".");
                if (i == -1) {
                    return null;
                }
                var ext = name.substring(i + 1);
                return ext.toLocaleLowerCase();
            },
            canPreview: function (name) {
                var ext = this.getExt(name);
                if ({
                    xls: 1,
                    xlsx: 1,
                    doc: 1,
                    docx: 1,
                    ppt: 1,
                    pptx: 1,
                    pdf: 1
                }[ext] == 1) {
                    return true;
                }
                return false
            },

            getPreviewUrl: function (v) {
                var name = v.resp ? v.resp.name : v.name;
                var ext = this.getExt(name);
                if (ext == 'pdf') {
                    return 'PageOffice://|http://47.94.97.138/office/PDF.jsp?path=/hz/bpm/uploads' + (v.resp ? v.resp.id : v.id) + '|left=20px;top=10px;width=800px;height=600px;|' + Math.random() + '|';
                } else {
                    return 'PageOffice://|http://47.94.97.138/office/OpenWord.jsp?path=/hz/bpm/uploads' + (v.resp ? v.resp.id : v.id) + '|left=20px;top=10px;width=800px;height=600px;|' + Math.random() + '|';
                }
            },

            preview: function (id) {
                window.open("PageOffice://|http://47.94.97.138/office/ReadOnly/OpenWord.jsp?path=/hz/bpm/uploads" + id, "pageoffice-preview", "left=100, top=100, width=800, height=300");
            },

            /**
             * 可处理并发节点
             */
            canDeal: function () {
                var t = this;
                var id = getParam("id");
                this.type = getParam("type");
                if (this.type == 'pub') {
                    t.load();
                } else {
                    $.ajax({
                        url: "/api/bpm/workflow/dealCurrent",
                        dataType: "json",
                        data: JSON.stringify({id: id}),
                        type: "post",
                        headers: {
                            "Content-type": "application/json",
                        },
                        success: function (msg) {
                            if (!msg.success) {
                                return layer.msg(msg.errMessage)
                            }
                            var _data = msg.data;
                            if (!_data) {
                                return layer.msg("查询错误")
                            }
                            if (!_data.deal) {
                                t.load();
                                return;
                            }
                            if (_data.deal) {
                                if (_data.currNode && _data.currNode.length > 1) {

                                    (_data.currNode || []).forEach(function (v) {
                                        t.dealCurrent[v.nodeId] = {
                                            id: v.nodeId,
                                            name: v.nodeName
                                        };
                                    });
                                    t.files = [];

                                    // layer.open({
                                    //     type: 1,
                                    //     area: ['400px', '300px'], //宽高
                                    //     content: $("#concurrent-model"),
                                    //     title: "并发节点"
                                    // });
                                } else {
                                    /*if(_data.nodeIds && _data.nodeIds[0]){
                                        if("" == t.dealNode){
                                            t.dealNode = _data.nodeIds[0].nodeId
                                        }

                                    }*/
                                    // 不是并发节点时获取当前节点
                                    // if($.isEmptyObject(_data.nodeIds[0])){
                                    if (_data.currNode && _data.currNode[0]) {
                                        t.dealNode = _data.currNode[0].nodeId
                                    }
                                    // }
                                    t.load();
                                }
                            }

                        }
                    })

                }


            },
            /**
             * 并发处理
             */
            concurrentAction: function () {
                this.id = getParam("id");
                this.isConcurrent = true;
                if (this.dealNode == "" || this.dealNode == null) {
                    return layer.msg("请选择要处理的节点");
                }
                var ajax = $.post("/api/bpm/workflow/getInsInfo", JSON.stringify({
                    id: this.id,
                    args: getAllUrlParams(),
                    nodeId: this.dealNode
                }));
                var t = this;
                $.when(ajax).then(function (msg) {
                    layer.closeAll();
                    if (!msg.success) {
                        return layer.msg(msg.errMessage);
                    }
                    t.data = null;
                    t.$nextTick(function () {
                        t.inited = true;
                        t.data = msg.data;
                        if (t.type == "edit") {
                            t.data.deal = true;
                        }
                        t.files = msg.data.files || [];
                    });

                });
            },

            /**
             * 创建子流程
             */
            createChildProcess: function (id) {
                $.post("/api/bpm/workflow/createChildIns", JSON.stringify({
                    insId: this.id,
                    modelId: id,
                    logId: this.data.logId
                }), function (msg) {
                    if(!msg.success){
                        return layer.msg(msg.errMessage)
                    }
                    location.reload();
                },"json");
            },

            goBackParent: function () {
                location.href = 'ins.pub.html?type=deal&id=' + this.data.parInsId;// + "&logId=" + v.logId
            },
            goNode: function (v) {
                console.log(v)
                if (v.type == 'node') {
                    if(this.data.logId == v.logId){
                        return;
                    }
                    location.href = 'ins.pub.html?type=deal&id=' + this.id + "&logId=" + v.logId
                } else if (v.type == 'childps') {
                    location.href = 'ins.pub.html?type=deal&id=' + v.insId
                }
            }

        },
        mounted: function () {
            this.initWidgetUploader()
            this.initUploader();
            this.load()
            // this.canDeal()
        }
    });

</script>


